<script lang="ts" setup>
    import {reactive,onMounted} from 'vue';
    import {getWordsList} from '@/service/words/index'
    const state=reactive({
        title:'words',
        list:[],
        loading:false
    })
    const getList=async ()=>{
        try{
            state.loading=true
            const data=await getWordsList()
            console.log('data',data)
            state.list=data.data.data
            console.log('state.list',state.list)
        }
        catch (e) {
            console.error(e)
        }
        state.loading=false

    }
    onMounted(()=>{
        getList()
    })
    </script>
<template>
    <div style="overflow: hidden">
        <div style="text-align: right">
            <a-button type="primary" @click="getList">查询</a-button>
        </div>
        <a-spin :spinning="state.loading">
            <div style="max-height: 600px;overflow: auto">
                <div v-for="(item,index) in state.list" :key="index" style="width: 100%;position: relative;margin:20px 0;">
                    <div style="font-size: 20px;font-weight: bold;color: #fff;background: #1890ff;width: fit-content;padding:4px">
                        {{item.name}}
                    </div>
                    <div style="font-size: 14px;color: #262626">
                        解释：{{item.description}}
                    </div>
                </div>
            </div>
        </a-spin>

    </div>
</template>
